$(function() {
  let data = {
    shopid: 0,
    areaid: 0
  };
  let obj = {
    shop: '京东',
    area: '华北',
    price: '全部价格'
  };
  function tabRender(obj) {
    let str = '';
    for (v in obj) {
      str += `<li><a href="javascript:;">${obj[v]}</a></li>`;
    }
    $('.gs-nav .tabs').html(str);
  }
  tabRender(obj);

  //模态框显示隐藏
  //同时渲染模态框数据
  $('.gs-nav').on('click', 'li', function() {
    $('#show-list').removeClass('hidden');
    // console.log($(this).index());
    let index = $(this).index();
    // console.log(index);
    switch (index) {
      case 0:
        listReder('shopTmp', 'http://localhost:3000/api/getgsshop');
        break;
      case 1:
        listReder('areaTmp', 'http://localhost:3000/api/getgsshoparea');
        break;
      case 2:
        $('#show-list ul').html(`<li><a href="javascript:;">全部价格</a></li>`);
        break;
      default:
        break;
    }
  });

  //二级列表点击事件
  $('#show-list').on('click', 'li', function(e) {
    //阻止冒泡
    e.stopPropagation();
    // console.log($(this).hasClass('shop'));
    if ($(this).hasClass('shop')) {
      obj.shop = $(this)
        .children('a')
        .text();
      tabRender(obj);
      console.log($(this).data('id'));
      data.shopid = $(this).data('id');
      //   console.log(obj);
      console.log(data);
      mainRender(data);
    } else if ($(this).hasClass('area')) {
      obj.area = $(this)
        .children('a')
        .text();
      //   console.log(obj);
      tabRender(obj);
      data.areaid = $(this).data('id');
      //   console.log(obj);
      //   console.log(data);
      mainRender(data);
    }
    $('#show-list').addClass('hidden');

    // shopname areaname  tabrender(obj)
    //获取shopid  areaid  渲染主页面
  });

  //二级列表渲染
  function listReder(tmp, url) {
    $.ajax({
      url,
      success(res) {
        // console.log(template(tmp, res));
        $('#show-list ul').html(template(tmp, res));
      }
    });
  }

  //主内容区首屏渲染
  function mainRender(data) {
    // console.log(data);
    $.ajax({
      url: 'http://localhost:3000/api/getgsproduct',
      data,
      success(res) {
        // console.log(res);
        $('.mainlist').html(template('mainTmp', res));
      }
    });
  }
  mainRender(data);
});
